<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <style>
      @keyframes Forward {
        0% {
          transform: rotate(72deg);
        }
        25% {
          transform: rotate(144deg);
        }
        50% {
          transform: rotate(216deg);
        }
        75% {
          transform: rotate(288deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      @keyframes Reversal {
        0% {
          transform: rotate(360deg);
        }
        25% {
          transform: rotate(288deg);
        }
        50% {
          transform: rotate(216deg);
        }
        75% {
          transform: rotate(144deg);
        }
        100% {
          transform: rotate(72deg);
        }
      }
      #index_loading {
        position: fixed;
        top: 0;
        z-index: 2147483647;
        width: 100vw;
        height: 100vh;
        background-color: #ccc;
      }
      #loading {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 150px;
      }

      #loading .wheel {
        position: relative;
      }
      #loading .wheel > div {
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 5px;
      }
      #loading .wheel_one {
        position: absolute;
        top: 0;
        left: 0;
        animation: Forward 2s infinite;
      }
      #loading .wheel_one,
      #loading .wheel_one div {
        width: 80px;
        height: 80px;
      }
      #loading .wheel_one div {
        background: #1d3c26;
      }
      #loading .wheel_two {
        position: absolute;
        bottom: 5px;
        right: 70px;
        animation: Forward 2s infinite reverse;
      }
      #loading .wheel_two,
      #loading .wheel_two div {
        width: 60px;
        height: 60px;
      }
      #loading .wheel_two div {
        background: #578f53;
      }

      #loading .wheel_three {
        position: absolute;
        top: 45px;
        right: 15px;
        animation: Forward 2s infinite;
      }
      #loading .wheel_three,
      #loading .wheel_three div {
        width: 50px;
        height: 50px;
      }
      #loading .wheel_three div {
        background: #eadfce;
      }
      #loading .wheel:after {
        position: absolute;
        content: '';
        background: #fff;
        width: 50%;
        height: 50%;
        border-radius: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      #loading .wheel div:nth-child(2) {
        transform: rotate(120deg);
      }
      #loading .wheel div:nth-child(3) {
        transform: rotate(240deg);
      }
    </style>
    <script>
      document.onreadystatechange = function () {
        switch (document.readyState) {
          case 'interactive':
            break
          case 'complete':
            document.getElementById('index_loading').remove()
            break
        }
      }
    </script>

    <!-- 加载遮罩层 -->
    <div id="index_loading">
      <div id="loading">
        <div class="wheel wheel_one">
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="wheel wheel_two">
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="wheel wheel_three">
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
    </div>
    <div id="app"></div>

    <script type="module" src="/src/main.ts"></script>
    <script src="https://code.iconify.design/2/2.0.4/iconify.min.js"></script>
    <script src="https://code.iconify.design/2/2.0.3/iconify.min.js"></script>
  </body>
</html>
